<template>
   <div class="home-recommend">
    <section class="personalizeds">
      <HomeTitle>编辑推荐</HomeTitle>
      <ul class="ulone">
          <PlayListCard v-for="item in personalizeds" :key="item.id" :item="item"></PlayListCard>
      </ul>
      <HomeTitle>最新音乐</HomeTitle>
      <ul class="ultwo">
          <SongListItem @update:currentPLayList="$emit('update:currentPLayList', $event);" @click.native="$emit('update:currentSong',item)"
          :currentPLayList="currentPLayList" v-for="(item, index) in newsong" :key="item.id" :item="item" :order="index + 1" :currentSong="currentSong" :playing="playing" />
      </ul>
    </section>
  </div>
</template>

<script>
import HomeTitle from '@/components/HomeTitle.vue'
import PlayListCard from '@/components/PlayListCard.vue'
import SongListItem from '@/components/SongListItem.vue'
export default {
     props: {
        currentSong: [Object, null],
        playing: Boolean,
        currentPLayList: Array,
     },
     components: {
     HomeTitle,
     PlayListCard,
     SongListItem,
  },
     data: function () {
    return {
      personalizeds: [],
      newsong: [],
    };
  },

  created: function () {
    this.axios
      .get("https://apis.netstart.cn/music/personalized?limit=6")
      .then((res) => {
        // console.log(res, this);
        // console.log(res.data.result);
        this.personalizeds = res.data.result;
      });
    this.axios
      .get("https://apis.netstart.cn/music/personalized/newsong")
      .then((res) => {
        this.newsong = res.data.result;
      });
  },
}
</script>

<style lang="less">
   .home-recommend {
     .personalizeds {
      .ulone {
      display: flex;
      flex-wrap: wrap;
      padding: 0;
    }
     .ultwo {
        flex-wrap: wrap;
        padding: 0;
     }
  }
}
</style>